<template>
  <div>
    <h1>计算属性</h1>
    <div class="computer">{{ msg }}</div>
    <div>computed: {{ com }}</div>
    <input v-model="msg" />
    <input id="jack" v-model="checkedNames" type="checkbox" value="Jack" />
    <label for="jack">Jack</label>
    <input id="john" v-model="checkedNames" type="checkbox" value="John" />
    <label for="john">John</label>
    <input id="mike" v-model="checkedNames" type="checkbox" value="Mike" />
    <label for="mike">Mike</label>
    <br />
    <span>Checked names: {{ checkedNames }}</span>

    <input v-model="checkName" type="checkbox" />
    <div>checkNmae: {{ checkName }}</div>
  </div>
</template>

<script>
export default {
  name: "ComputedDemo",
  data() {
    return {
      msg: "helloworld",
      checkedNames: [],
      checkName: ""
    };
  },
  computed: {
    com() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    }
  },
  methods: {
    doClick() {}
  }
};
</script>

<style lang="less" scoped>
@base: #768132;
.computer {
  color: @base;
}
</style>
